<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <img src="./images/logo.png" alt="">
        <div class="nav">
            <a href="#"><span class="iconfont ic_search_tab"></span></a>
            <img src="./images/login.png" alt="">
            <p>下载APP</p>
        </div>
    </header>

    <!-- 导航栏 -->
    <div class="nav-bar">
        <ul>
            <li><span>首页</span></li>
            <li><span>动画</span></li>
            <li><span>番剧</span></li>
            <li><span>国创</span></li>
            <li><span>音乐</span></li>
            <li><span>舞蹈</span></li>
            <li><span>游戏</span></li>
            <li><span>知识</span></li>
            <li><span>科技</span></li>
        </ul>
        <a href="#"><span class="iconfont general_pulldown_s"></span></a>
    </div>

    <!-- 主体 -->
    <main>
        <ul>
            <li>
                <img src="./images/01.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>103万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>2786</a>
                    </div>
                </div>
                <p >三权合一！特朗普成为美国40年以来权力最大的总统！将势不可挡</p>
            </li>
            <li>
                <img src="./images/02.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>59.2万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>2734</a>
                    </div>
                </div>
                <p >“大叔的支持率已经超过大妈啦！”</p>
            </li>
        </ul>
        <ul>
            <li>
                <img src="./images/03.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>44.2万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>380</a>
                    </div>
                </div>
                <p >所以，要好好吃饭。</p>
            </li>
            <li>
                <img src="./images/04.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>225.2万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>3991</a>
                    </div>
                </div>
                <p >全世界都在逼你长大，而我想让你做个孩子。</p>
            </li>
        </ul>
        <ul>
            <li>
                <img src="./images/05.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>83万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>1万</a>
                    </div>
                </div>
                <p >在东京朗诵《长恨歌》，日本人全是白居易粉丝！？</p>
            </li>
            <li>
                <img src="./images/06.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>172.5万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>3173</a>
                    </div>
                </div>
                <p >怎样的成就才能配得上这一路的颠沛流离</p>
            </li>
        </ul>
        <ul>
            <li>
                <img src="./images/07.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>83万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>1万</a>
                    </div>
                </div>
                <p >败选后再胜选，这复仇的滋味多美妙谁能比他更懂？</p>
            </li>
            <li>
                <img src="./images/08.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>172.5万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>3173</a>
                    </div>
                </div>
                <p >上帝亲孙如何直播政变？【硬核狠人73】</p>
            </li>
        </ul>
        <ul>
            <li>
                <img src="./images/09.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>83万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>1万</a>
                    </div>
                </div>
                <p >败选后再胜选，这复仇的滋味多美妙谁能比他更懂？</p>
            </li>
            <li>
                <img src="./images/10.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>172.5万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>3173</a>
                    </div>
                </div>
                <p >上帝亲孙如何直播政变？【硬核狠人73】</p>
            </li>
        </ul>
        <ul>
            <li>
                <img src="./images/11.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>83万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>1万</a>
                    </div>
                </div>
                <p >败选后再胜选，这复仇的滋味多美妙谁能比他更懂？</p>
            </li>
            <li>
                <img src="./images/12.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>172.5万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>3173</a>
                    </div>
                </div>
                <p >上帝亲孙如何直播政变？【硬核狠人73】</p>
            </li>
        </ul>
        <ul>
            <li>
                <img src="./images/13.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>83万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>1万</a>
                    </div>
                </div>
                <p >败选后再胜选，这复仇的滋味多美妙谁能比他更懂？</p>
            </li>
            <li>
                <img src="./images/14.png" alt="">
                <div class="video">
                    <div class="info">
                        <a href="#"><span class="iconfont icon_shipin_bofangshu"></span>172.5万</a>
                        <a href="#"><span class="iconfont icon_shipin_danmushu"></span>3173</a>
                    </div>
                </div>
                <p >上帝亲孙如何直播政变？【硬核狠人73】</p>
            </li>
        </ul>



    </main>


    <!-- 底部 -->
    <footer>
        <div>
            <a href="#"><span class="iconfont Navbar_logo"></span></a>
            <span>打开App，看你感兴趣的视频</span>
        </div>
    </footer>

</body>

</html>